<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MediaQueryList example</title>
    <style>
      html {
        font-family: sans-serif;
        background-color: white;
      }

      body {
        padding: 20px;
        margin: 10px;
        background-color: blue;
        border: 10px solid black;
      }

      h1,
      p {
        text-align: center;
      }

      p {
        font-size: 1.3rem;
      }
    </style>
  </head>
  <body>
    <h1>matchMedia test</h1>

    <p></p>

    <script>
      var para = document.querySelector("p");

      var mql = window.matchMedia("(max-width: 600px)");

      function screenTest(e) {
        if (e.matches) {
          /* the viewport is 600 pixels wide or less */
          para.textContent = "This is a narrow screen — less than 600px wide.";
          document.body.style.backgroundColor = "red";
        } else {
          /* the viewport is more than 600 pixels wide */
          para.textContent = "This is a wide screen — more than 600px wide.";
          document.body.style.backgroundColor = "blue";
        }
      }

      screenTest(mql);
      mql.addEventListener("change", screenTest, false);

      mql.onchange = function () {
        console.log(mql);
      };
    </script>
  </body>
</html>
